$(function () {
  // 定义一个全局变量,装axios所需要的的参数
  let query = {
    pagenum: 1,   //是	int	页码值,即获取第 n 页的数据
    pagesize: 5, //是	int	每页显示多少条数据
    cate_id: '',  //否	string	文章分类的 Id
    state: ''     //否	string	文章的状态，可选值有：已发布、草稿
  }
  let layer = layui.layer
  // 需求1:发送aixos,获取所有的文章
  initArticleList()
  function initArticleList() {
    axios({
      method: 'GET',
      url: '/my/article/list',
      params: query
    }).then(res => {
      if (res.data.status != 0) {
        return layer.msg(res.data.message)
      }
      // console.log(res.data)
      let arry = []
      res.data.data.forEach(ele => {
        arry.push(`
        <tr>
              <td>${ele.title}</td>
              <td>${ele.cate_name}</td>
              <td>${dataForm(ele.pub_date)}</td>
              <td>${ele.state}</td>
              <td>
                <a href='/article/article.edit.html?id=${ele.Id}'  class="layui-btn layui-btn-xs">
                  编辑
                </a>
                <button
                data-id="${ele.Id}"
                  class="btnDel layui-btn layui-btn-xs layui-btn-danger"
                >
                  删除
                </button>
              </td>
            </tr>
        `)

      });
      let str = arry.join('')
      $('tbody').empty().html(str)
      // console.log(res.data)
      pageRander(res.data.total)
    })
  }

  // 需求2:获取所有的文章分类
  let form = layui.form
  initArtCateList()
  function initArtCateList() {
    axios({
      method: 'GET',
      url: '/my/article/cates',
    }).then(res => {
      // console.log(res.data)
      if (res.data.status != 0) {
        return layer.meg(res.data.message)
      }
      let arry = ['<option value="">请选择文章类别</option>']
      res.data.data.forEach(ele => {
        arry.push(`
        <option value="${ele.Id}">${ele.name}</option>
        `)
      });
      let str = arry.join('')
      $('[name=cate_id]').empty().html(str)
      form.render()
    })
  }

  // 需求3:筛选
  $('#formSearch').on('submit', function (e) {
    e.preventDefault()
    // 修改query中的id和状态
    query.cate_id = $('[name=cate_id]').val()
    query.state = $('[name=state]').val()
    initArticleList()
  })

  // 需求4:分页功能 layui中的分页
  var laypage = layui.laypage;
  function pageRander(total) {
    //执行一个laypage实例
    laypage.render({
      elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: query.pagesize,//每页显示的条数
      curr: query.pagenum, //起始页
      limits: [2, 3, 4, 5],
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],//定制化
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if (!first) {
          //do something
          query.pagenum = obj.curr
          query.pagesize = obj.limit
          initArticleList()
        }
      }
    });

  }

  // 需求5:删除功能
  $('tbody').on('click', '.btnDel', function () {
    let id = $(this).attr('data-id')
    // console.log(id)
    layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
      axios({
        method: 'GET',
        url: '/my/article/delete/' + id,
      }).then(res => {
        if (res.data.status != 0) {
          return layer.msg(res.data.message)
        } layer.msg('恭喜您,删除成功!')

        // 优化页面,当删除所在的tr的长度等于1的时候,让当前页-1,当当前页大于等于2的时候才可以自减1
        if ($('.btnDel').length == 1 && query.pagenum >= 2) {
          query.pagenum--
        }
        // 重新渲染页面
        initArticleList()
      })
      layer.close(index);
    });

  })



})